<template>
  <div id="viewer"></div>
</template>
<script>
import { Viewer } from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
export default {
  props: {
    ImageList: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      viewer: '',
      imgurl1: require('../../../assets/images/214007pxo7c8c3xcal1key.jpg'),
    }
  },
  mounted() {
    console.log(this.ImageList)
    this.init()
  },
  methods: {
    init(data) {
      console.log(data)
      this.viewer = new Viewer({
        container: document.querySelector('#viewer'),
        panorama: data ? data[0].url : this.ImageList[0].url,
        size: {
          width: '500px',
          height: '500px',
        },
        defaultZoomLvl: 10,
      });
    }

  }
}
</script>
<style lang="scss">
</style>